<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>SIGN IN</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400">
  <link rel="stylesheet" href="/static/css/font-awesome.min.css">
  <link rel="stylesheet" href="/static/css/bootstrap.min.css">

  <link rel="stylesheet" href="/static/css/demo.css" />
  <link rel="stylesheet" href="/static/css/templatemo-style.css">

  <script type="text/javascript" src="/static/js/modernizr.custom.86080.js"></script>

</head>
	<body>
			<div id="particles-js"></div>
			<ul class="cb-slideshow">
	            <li></li>
	            <li></li>
	            <li></li>
	        </ul>

			<div class="container-fluid">
				<div class="row cb-slideshow-text-container ">
					<div class= "tm-content col-xl-6 col-sm-8 col-xs-8 ml-auto section">
					<header class="mb-5"><h1>SIGN IN</h1></header>
               	    	<form class="login100-form validate-form" method="POST" action="/login">
                            <div class="col-md-7 col-sm-7 col-xs-7" data-validate = "UserID is required">
                                <input name="username" type="text" class="form-control" id="username" placeholder="username" required/>
                            </div>
                            <div class="col-md-7 col-sm-7 col-xs-7" data-validate = "Password is required">
                                <input name="password" type="password" class="form-control" id="password" placeholder="password" required/>
                            </div>
                            <div class="col-md-7 col-sm-7 col-xs-7">
                                <h3 style="color: #FFFFFF;">Role</h3>
                               <select name="role"class="col-md-7 col-sm-7 col-xs-7" style="font-size: 18px" id="role">
                                   <option value="Product">Product</option>
                                    <option value="Transport">Transport</option>
                                    <option value="Sale">Sale</option>
                                </select>
                            </div>
                            <div class="col-md-7 col-sm-7 col-xs-7">
                                <button type="submit" class="tm-btn-subscribe" style="background-color:#000000;width:100%;height:60px;">Login</button>
                            </div>
<!--                            <div class="col-md-7 col-sm-7 col-xs-7">-->
<!--                                <a href="/register">-->
<!--                                    <button type="button" class="tm-btn-subscribe" style="background-color:#000000;width:100%;height:60px;">Register</button>-->
<!--                                </a>-->
<!--                            </div>-->
                        </form>
                    </div>
				</div>
				<div class="footer-link">
					<p>Copyright © 2018 Your Company
                    - Design: <a rel="nofollow" href="#" target="_parent">Adeline</a></p>
				</div>
			</div>
	</body>
	<script type="text/javascript" src="/static/js/particles.js"></script>
	<script type="text/javascript" src="/static/js/app.js"></script>
    <script language="JavaScript">
        {% if res=='fail' %}
            alert('fail to login');
        {% endif %}
    </script>

</html>